import React from "react";

import { useState } from "react";
import { useHistory } from "react-router";
import PropsTypes from "prop-types"

import { TabBar } from "zarm";
import s from './style.module.less';

import Customicon from "../Customicon";

const NavBar=({showNav})=>{

    const [activeKey,setActiveKey]= useState('/');
    const history=useHistory();
    const changeTab=(path)=>{
        setActiveKey(path);
        history.push(path);
    }

    return (
        <TabBar className={s.tab} visible={showNav} activeKey={activeKey} onChange={changeTab}>
            <TabBar.Item
             itemKey="/"
             title="账单"
             icon={<Customicon type="zhangdan" />}
              />
            <TabBar.Item
            itemKey="/data"
            title="统计"
            icon={<Customicon type="tongji" />}
            />
            <TabBar.Item
            itemKey="/user"
            title="我的"
            icon={<Customicon type="wode" />}
            />
        </TabBar>
    )
}

NavBar.PropsTypes={
    showNav:PropsTypes.bool
}

export default NavBar;